import { useEffect, useState, useRef } from 'react'
import { Layout, Button, message, Drawer, Upload } from 'antd'
const { Sider, Content } = Layout
import styles from './index.module.css'
import { uploadImageAction } from '@/api/image'
import ImageAside from '@/components/Image/ImageAside'
import type { UploadProps } from 'antd'
import { InboxOutlined } from '@ant-design/icons'
import { getToken } from '@/utils/auth'
import ImageMain from '@/components/Image/imageMain'
const { Dragger } = Upload
const token = getToken() as string

function image() {
  const [selectClass, setSelectClass] = useState(168)

  useEffect(() => {
    ImageMainRef.current.getImgLst()
  }, [selectClass])

  const getImgLst = () => {
    ImageMainRef.current.getImgLst()
  }

  const ImageAsideRef = useRef<any>(null)
  const ImageMainRef = useRef<any>(null)

  const showDrawer = () => {
    if (ImageAsideRef && ImageAsideRef.current) {
      ImageAsideRef.current.showDrawer()
    }
  }
  const clickClass = (id: number) => {
    setSelectClass(id)
  }

  // 上传抽屉
  const [uploadDrawer, setUploadDrawer] = useState(false)
  const props: UploadProps = {
    name: 'img',
    multiple: true,
    action: uploadImageAction,
    headers: {
      token: token
    },
    data: {
      image_class_id: selectClass
    },
    onChange(info) {
      const { status } = info.file
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success('上传成功')
        setUploadDrawer(false)
        getImgLst()
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files)
    }
  }
  return (
    <>
      <div className={styles.image}>
        <div style={{ height: 70, lineHeight: '70px' }}>
          <Button onClick={showDrawer}>新增图片分类</Button>
          <Button
            onClick={() => {
              setUploadDrawer(true)
            }}
          >
            上传图片
          </Button>
        </div>
        <Layout>
          <Sider style={{ background: '#ffffff' }}>
            <ImageAside ref={ImageAsideRef} setClassPage={clickClass} />
          </Sider>
          <Layout>
            <Content style={{ background: '#ffffff' }}>
              <ImageMain ref={ImageMainRef} selectClass={selectClass} />
            </Content>
          </Layout>
        </Layout>

        <Drawer
          title='上传图片'
          onClose={() => {
            setUploadDrawer(false)
          }}
          open={uploadDrawer}
          destroyOnClose
        >
          <div style={{ height: 250 }}>
            <Dragger {...props}>
              <p className='ant-upload-drag-icon'>
                <InboxOutlined />
              </p>
              <p className='ant-upload-text'>Click or drag file to this area to upload</p>
              <p className='ant-upload-hint'>
                Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
              </p>
            </Dragger>
          </div>
        </Drawer>
      </div>
    </>
  )
}
export default image
